import { useMemo, useImperativeHandle, forwardRef } from 'react';
import Initiate from './buttons/Initiate';
import Withdraw from './buttons/Withdraw';
import Urging from './buttons/Urging';
import Print from './buttons/Print';
import Cancel from './buttons/Cancel';
import Draft from './buttons/Draft';
import Approve from './buttons/Approve';
import ReturnsBack from './buttons/ReturnsBack';
import Assign from './buttons/Assign';
import PlusSign from './buttons/PlusSign';
import Custom from './buttons/Custom';

const ButtonFields = forwardRef((props: any, ref) => {
    const { value, onChange, type, form } = props;

    const customButtons = useMemo(() => {
        return value?.filter((item: { action: string; }) => item?.action == 'custom') || []
    }, [value]);

    const buttonProps = {
        form,
        type,
        value,
        onChange,
    };

    useImperativeHandle(ref, () => {
        return {
            customValue: value,
            onCustomChange: onChange,
        }
    });

    switch (type) {
        case 'firstTask':
            return (
                <>
                    <Initiate {...buttonProps} />
                    <Withdraw {...buttonProps} />
                    <Urging {...buttonProps} />
                    <Print {...buttonProps} />
                    <Cancel {...buttonProps} />
                    <Draft {...buttonProps} />
                    {
                        customButtons?.map((item) => {
                            return (
                                <Custom {...buttonProps} key={item?.id} id={item?.id} />
                            )
                        })
                    }
                </>
            )
        case 'userTask':
            return (
                <>
                    <Approve {...buttonProps} />
                    <ReturnsBack {...buttonProps} />
                    <Assign {...buttonProps} />
                    <PlusSign {...buttonProps} />
                    <Cancel {...buttonProps} />
                    <Print {...buttonProps} />
                    {
                        customButtons?.map((item) => {
                            return (
                                <Custom {...buttonProps} key={item?.id} id={item?.id} />
                            )
                        })
                    }
                </>
            )
        case 'ctSignTask':
            return (
                <>
                    <Approve {...buttonProps} />
                    <ReturnsBack {...buttonProps} />
                    <Cancel {...buttonProps} />
                    <Print {...buttonProps} />
                    {
                        customButtons?.map((item) => {
                            return (
                                <Custom {...buttonProps} key={item?.id} id={item?.id} />
                            )
                        })
                    }
                </>
            )
        default:
            return null;
    }
});

export default ButtonFields;